<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>网络流行的jquery幻灯片【滑动图】</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        body{font-size:12px;color:#222;font-family:Verdana,Arial,Helvetica,sans-serif;background:#f0f0f0;}
        ul,li{list-style:none;}
        img{border:0;}
        .wrapper{width:960px;margin:0 auto;padding-bottom:50px;}
        h1{height:50px;line-height:50px;font-size:22px;font-weight:normal;font-family:"Microsoft YaHei",SimHei;margin-bottom:20px;}
        /* focus */
        #focus{width:960px;height:600px;overflow:hidden;position:relative;}
        #focus ul{height:600px;position:absolute;}
        #focus ul li{float:left;width:960px;height:600px;overflow:hidden;position:relative;background:#000;}
        #focus .btnBg{position:absolute;width:800px;height:20px;left:0;bottom:0;background:#000;}
        #focus .btn{position:absolute;width:780px;height:10px;padding:5px 10px;right:0;bottom:0;text-align:right;}
        #focus .btn span{display:inline-block;_display:inline;_zoom:1;width:25px;height:10px;_font-size:0;margin-left:5px;cursor:pointer;background:#fff;}
        #focus .btn span.on{background:#fff;}
        #focus .preNext{width:45px;height:100px;position:absolute;top:270px;background:url(img/sprite.png) no-repeat 0 0;cursor:pointer;}
        #focus .pre{left:0;}
        #focus .next{right:0;background-position:right top;}
    </style>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var sWidth = $("#focus").width(); //获取焦点图的宽度（显示面积）
            var len = $("#focus ul li").length; //获取焦点图个数
            var index = 0;
            var picTimer;

            //以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮
            var btn = "<div class='btnBg'></div><div class='btn'>";
            for(var i=0; i < len; i++) {
                btn += "<span></span>";
            }
            btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
            $("#focus").append(btn);
            $("#focus .btnBg").css("opacity",0.5);

            //为小按钮添加鼠标滑入事件，以显示相应的内容
            $("#focus .btn span").css("opacity",0.4).mouseover(function() {
                index = $("#focus .btn span").index(this);
                showPics(index);
            }).eq(0).trigger("mouseover");

            //上一页、下一页按钮透明度处理
            $("#focus .preNext").css("opacity",0.2).hover(function() {
                $(this).stop(true,false).animate({"opacity":"0.5"},300);
            },function() {
                $(this).stop(true,false).animate({"opacity":"0.2"},300);
            });

            //上一页按钮
            $("#focus .pre").click(function() {
                index -= 1;
                if(index == -1) {index = len - 1;}
                showPics(index);
            });

            //下一页按钮
            $("#focus .next").click(function() {
                index += 1;
                if(index == len) {index = 0;}
                showPics(index);
            });

            
            $("#focus ul").css("width",sWidth * (len));

            
            $("#focus").hover(function() {
                clearInterval(picTimer);
            },function() {
                picTimer = setInterval(function() {
                    showPics(index);
                    index++;
                    if(index == len) {index = 0;}
                },5000); 
            }).trigger("mouseleave");

           
            function showPics(index) { //普通切换
                var nowLeft = -index*sWidth; //根据index值计算ul元素的left值
                $("#focus ul").stop(true,false).animate({"left":nowLeft},800); //通过animate()调整ul元素滚动到计算出的position
                //$("#focus .btn span").removeClass("on").eq(index).addClass("on"); //为当前的按钮切换到选中的效果
                $("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); //为当前的按钮切换到选中的效果
            }
        });

    </script>
</head>
<body>
<div class="wrapper">
    <div id="focus">
        <ul style="left: -3200px; width: 4000px;">
            <li><img src="img/12.png"/></li>
            <li><img src="img/2.PNG"/></li>
            <li><img src="img/5.PNG"/></li>
            <li><img src="img/4.PNG"/></li>
            <li><img src="img/5.PNG"/></li>
        </ul>
        <!--<div class="btnBg" style="opacity: 0.5;"></div><div class="btn"><span style="opacity: 0.4;"></span><span style="opacity: 0.4;"></span><span style="opacity: 0.4;"></span><span style="opacity: 0.4;"></span><span style="opacity: 1;"></span></div><div class="preNext pre" style="opacity: 0.2;"></div><div class="preNext next" style="opacity: 0.2;"></div>-->
    </div><!--focus end-->
</div><!-- wrapper end -->
</body>
</html>